<template>
    <div class="login">
        <div class="login-page">
            <div class="login-content">
                <div class="top">
                    <img src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019EMSgrHV5vZ1566894495.png"
                        alt="">
                </div>

                <div class="int-num">
                    <input type="text" v-model="tel" placeholder="请输入用户名">
                </div>

                <div class="int-num">
                    <input type="password" v-model="password" placeholder="请输入密码">
                </div>

                <!-- 下 -->
                <div class="others">
                    <span class="forget" @click="Mmlogin">找回密码</span>
                    <span class="" @click="Smslogin">注册/验证码登录</span>
                </div>
            </div>
            <div class="login-button" type="info" @click="submit">登录</div>
            <div class="otherLogin">
                第三方登录
                <div class="txLogin">
                    <div class="wxLogin" @click="qq_wxLogin(1)">
                        <img class="ii" src="@/assets/images/wechat.png" />
                        <span class="ss">微信登录</span>
                    </div>
                    <div class="qqLogin" @click="qq_wxLogin(2)">
                        <img class="ii" src="@/assets/images/QQ.png" alt />
                        <span class="ss">QQ登录</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import { login } from "../../api/index"
    import axios from 'axios'
    export default {
        name: 'Login',
        data() {
            return {
                // tel: "17801116367",
                // password: "123456",
                tel: "",
                password: ""
            }
        },
        mounted() {
        },
        methods: {
            submit() {
                let obj = {
                    mobile: this.tel,
                    password: this.password,
                    type: '1'
                }
                console.log(obj)
                login(obj)
                    .then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            alert("成功")
                            localStorage.setItem("adminToken", JSON.stringify(res.data.remember_token));
                            localStorage.setItem("userinfo", JSON.stringify(res.data));
                            // localStorage.setItem('res',res.data.data)
                            this.$router.push({
                                path: "/My",
                            })
                        }
                        else if (res.data.code === 201) {
                            alert("有误")
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },


            //返回注册/验证码登录页
            Smslogin() {
                this.$router.push("/Smslogin")
            },
            //返回找回密码页
            Mmlogin() {
                this.$router.push("/Mmlogin")
            },
            qq_wxLogin(type) {
                console.log(type);
            },
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .login-content {
        width: 414px;
        height: 277px;
        padding: 44px;
    }

    .top {
        width: 326px;
        height: 58px;
        margin-bottom: 72px;
    }

    img {
        width: 200px;
        margin: 35px;
    }

    .int-num {
        border-bottom: 2px solid #eee;
        width: 7.2rem;
        height: 50px;
        /* background:pink; */
    }

    input {
        box-sizing: border-box;
        padding: 0.4rem 0;
        border: 0;
        width: 7.2rem;
        font-size: 0.4rem;
        line-height: 0.53333rem;
        float: left;
        outline: none;
    }

    .others {
        width: 300px;
        margin-top: 0.3rem;
        display: flex;
        justify-content: space-between;
    }

    span {
        margin-left: 30px;
        width: 100px;
        font-size: 0.32rem;
        font-weight: 400;
        color: #999999;
    }

    .login-button {
        width: 260px;
        height: 40px;
        line-height: 40px;
        margin: 3px 45px;
        text-align: center;
        background: rgb(255, 106, 6);
        color: white;
        border-radius: 40px;
    }

    .otherLogin {
        width: 95%;
        margin: 20px auto;
        text-align: center;

    }

    .txLogin {
        display: flex;
    }

    .wxLogin {
        border-right: 1px solid #f1f1f1;
    }

    .wxLogin img {
        width: 38px;
        height: 28px;
    }

    .qqLogin img {
        width: 34px;
        height: 34px;
    }

    .wxLogin,
    .qqLogin {
        width: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ss {
        font-size: 15px;
        color: rgba(140, 140, 140, 1);
    }
</style>